<template>
   <!-- 
    作用域插槽的主要应用场景就是需要使用者(引用者，父组件)自己决定样式布局的，数据又来自与子组件
    -->
    <div>
        <MyList :data="list">
            <template v-slot="scope">
                {{scope.row.score}}
                <div :class="{danger:scope.row.score<60}"></div>
            </template>
      </MyList>
      <MyList :data="list">
      <template v-slot="scope">
         <div v-if="scope.row.score<60"><b>{{scope.row.score}}</b></div>
         <div v-else>{{scope.row.score}}</div>
      </template>
    </MyList>
    </div>
   

</template>

<script>
export default {
 data(){
    return{
        list:[
            {sno:'1001',sname:'张三丰',score:89},
            {sno:'1002',sname:'李丰博',score:79},
            {sno:'1003',sname:'王小华',score:53},
            {sno:'1004',sname:'黄潇潇',score:69},
            {sno:'1005',sname:'李达康',score:99}
        ]
    }
 }
}
</script>

<style>
    .danger{
       width: 20px;
       height: 20px;
       background-color: red;
       border-radius: 50%;
    }
</style>